<template>
  <b-page class="game-data ">
    <div class="real-time-data">
      <div class="real-time-data-title">活动实时数据</div>
      <div class="d-aic">
        <b-card-data v-for="(item,index) in numList" :key="index" v-bind="item"/>
      </div>
    </div>
    <div>
      <a-tabs :activeKey="active" @change="changeActive">
        <a-tab-pane key="1" tab="基本数据">
          <div class="table-one">
            <b-data-title title="活动基本数据"/>
            <div class="mt-20">
              <basic-data-table ref="BasicDataTable"/>
            </div>
          </div>
          <div class="table-two mt-40">
            <b-data-title title="用户层级数据"/>
            <div class="mt-20">
              <user-level-table ref="UserLevelTable"/>
            </div>
          </div>
          <div class="echart-list d-aic mt-40">
            <div class="echart-pie">
              <b-data-title title="用户增长趋势"/>
              <basic-line-chart ref="BasicLineChart"/>
            </div>
            <div class="echart-funnel">
              <b-data-title title="转化漏斗"/>
              <funnel-chart ref="FunnelChart"/>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="用户分析" force-render>
          <user-analyse/>
        </a-tab-pane>
        <a-tab-pane key="3" tab="渠道分析">
          <channel-analyse ref="channelAnalyse"/>
        </a-tab-pane>
      </a-tabs>
    </div>
  </b-page>
</template>

<script>
  import TotalPieSpecialLabel from './sub/TotalPieSpecialLabel'
  import BCardData from '../../../components/b-card-data'
  import API from '@/api/gameData'
  import BDataTitle from '../../../components/b-data-title'
  import UserLevelTable from './sub/UserLevelTable'
  import BasicDataTable from './sub/BasicDataTable'
  import BasicLineChart from './sub/BasicLineChart'
  import FunnelChart from './sub/funnelsChart'
  import UserAnalyse from './sub/UserAnalyse'
  import ChannelAnalyse from './sub/ChannelAnalyse'

  export default {
    name: 'GameData',
    components: {
      ChannelAnalyse,
      UserAnalyse,
      FunnelChart,
      BasicLineChart,
      BasicDataTable,
      UserLevelTable,
      BDataTitle,
      BCardData,
      TotalPieSpecialLabel
    },
    data () {
      return {
        active: '1',
        numList: [
          {
            title: '总参与用户',
            todayTitle: '今日参与用户',
            tips: '此次活动总参与的用户数',
            dataNum: 0,
            todayDataNum: 0
          }, {
            title: '总净增粉丝',
            todayTitle: '今日净增粉丝',
            tips: '总参与用户-取关用户-参与活动未取关的老粉丝用户',
            dataNum: 0,
            todayDataNum: 0
          }, {
            title: '总净增好友数',
            todayTitle: '今日净增好友数',
            tips: '净增好友数=总参与用户-已被删好友数',
            dataNum: 0,
            todayDataNum: 0
          }, {
            title: '裂变率',
            todayTitle: '',
            tips: '裂变率=（总参与用户-一级用户）/总参与用户',
            dataNum: '0%',
            todayDataNum: 0
          }, {
            title: '好友留存率',
            todayTitle: '',
            tips: '好友留存率=（总净增好友数-已被删好友数）/总净增好友数',
            dataNum: '90%',
            todayDataNum: 0
          }]

      }
    },
    computed: {
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      },
      gameTaskId () {
        return this.$route.query.gameTaskId
      }
    },
    mounted () {
      this.active = this.$route.query.active || '1'
      this.getData()
    },
    methods: {
      getData () {
        API.getData({ gameTaskId: this.gameTaskId, qwUserId: this.qwUserId }).then(res => {
          this.formatFromPage(res.realDTO)
          this.$refs.BasicDataTable.init(res)
          this.$refs.UserLevelTable.init(res.referrerLevelList)
          this.$refs.FunnelChart.init(res)
          this.$refs.BasicLineChart.init(res)
        })
      },
      formatFromPage (result) {
        // 总净增好友数
        const zjz = result.totalJoinCount - result.totalUnbindFriend
        this.numList[0].dataNum = result.totalJoinCount
        this.numList[0].todayDataNum = result.todayJoinCount
        this.numList[1].dataNum = result.totalJoinCount - result.totalUnfollow
        this.numList[1].todayDataNum = result.todayJoinCount - result.todayUnfollow
        this.numList[2].dataNum = zjz
        this.numList[2].todayDataNum = result.todayJoinCount - result.todayUnbindFriend
        this.numList[3].dataNum = result.totalJoinCount ? this.$Utils.keepN((result.totalJoinCount - result.oneReferrerLevelCount) / result.totalJoinCount) * 100 + '%' : '0%'
        this.numList[4].dataNum = zjz ? this.$Utils.keepN((zjz - result.totalUnbindFriend) / zjz) * 100 + '%' : '100%'
      },
      changeActive (index) {
        this.active = index
      }
    }
  }
</script>

<style scoped lang="less">

  .real-time-data {
    padding-bottom: 20px;

    .real-time-data-title {
      margin-bottom: 20px;
      color: rgba(0, 0, 0, .85);
      font-weight: 500;
    }

    .b-card-data + .b-card-data {
      margin-left: 24px;
    }
  }

  .echart-pie, .echart-funnel {
    flex-grow: 1;
  }

  .mt-40 {
    margin-top: 40px;
  }

  .mt-20 {
    margin-top: 20px;
  }

</style>
